<!-- 使用示例 -->
<!-- <SvgIcon icon-class="icon_more" color="#409EFF"></SvgIcon> -->
<template
  ><svg :class="classList" aria-hidden="true">
    <use :xlink:href="iconName" rel="external nofollow" :fill="props.color" />
  </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue'
interface PropsType {
  //   是否需要更多按钮
  className?: string
  iconClass: string
  color?: string
  size?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  className: '',
  iconClass: '',
  color: '#606266',
  size: '20px'
})
const classList = computed(() => {
  return ['icon', props.className || '']
})
const iconName = computed(() => {
  return `#${props.iconClass}`
})
</script>
<style scoped lang="scss">
.icon {
  /* v-bind是Vue3才支持的功能，可以将CSS的值与js的值绑定 */
  width: v-bind('props.size');
  height: v-bind('props.size');
  position: relative;
  vertical-align: -2px;
  fill: currentColor;
}
</style>
